<template>
  <div class="shop-balance">
    <div class="shop-balance-info">
      <div class="can-use">
        <p>可用店铺余额
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>可用店铺余额=店铺余额-不可用店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p>
          <!-- <span class="balance">{{shopInfo.balanceAvailable | $number2Price}}</span> -->
          <a-statistic style="display:inline-block; margin-right: 20px" :precision="2" :value="shopInfo.balanceAvailable | $number2Price" />
          
          <a-button disabled title="敬请期待">提现</a-button>
          <span> 可提现金额
            <a-statistic style="display:inline-block" :precision="2" :value="shopInfo.balanceCash | $number2Price" >
            </a-statistic>
          </span>
        </p>
      </div>
      <div class="wait-settlement">
        <p>待结算(元)
          
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>交易未完成的订单总额，消费者确认收货后将自动转入店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p>
          <!-- <span class="balance">{{shopInfo.balanceUnsettle | $number2Price}}</span> -->
          <a-statistic :precision="2" :value="shopInfo.balanceUnsettle | $number2Price" />
        </p>
      </div>
      <div class="cannot-use">
        <p>不可用店铺余额(元)
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>提现中或者退款中的冻结店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p>
          <!-- <span class="balance">{{shopInfo.balanceUnavailable | $number2Price}}</span> -->
          <a-statistic :precision="2" :value="shopInfo.balanceUnavailable | $number2Price" />
        </p>
      </div>
    </div>
 <!--   <p class="shop-balance-record-title">
      <span>最近7天交易记录</span>
      <a-button type="link" @click="openModal('dealRecordVisible')">全部交易记录</a-button>
    </p>-->

    <div class="shop-balance-record">
      <a-tabs type="card" @change="tabChange">
        <a-tab-pane :key="0" tab="账单明细">

        </a-tab-pane>
        <a-tab-pane :key="1" tab="待结算明细" ></a-tab-pane>
      </a-tabs>
      
      <search-table :defaultParams="defaultParams"
                    :hideSelect="true"
                    :url="recordUrl"
                    ref="searchtable"
                    :columns="columns"
                    :form="form">
        <template slot="searchForm">
          <a-form layout="inline" :form="form">
            <a-row>
              <a-form-item label="账单时间">
                <fast-range-picker
                  style="width: 240px"
                  v-decorator="['startTime-endTime']"
                >
                </fast-range-picker>
              </a-form-item>
              <a-form-item label="交易类型">
                <a-select
                  showSearch
                  allowClear
                  style="width: 150px"
                  :options="buyType"
                  v-decorator="['type']"
                  placeholder="请选择交易类型"
                >
                </a-select>
              </a-form-item>

            </a-row>
          </a-form>
        </template>
        <template slot="tableOperation" slot-scope="{ record }">
          <a-space>
            <span class="text-primary pointer" @click="jumpDetail(record.id)">详情</span>
          </a-space>
        </template>
        <template slot="oprationRow">
          <permission authority="">
            <a-button type="primary" @click="exportExcel()" >导出</a-button>
          </permission>
          <!--  <permission authority="">
              <a-button style="" @click="deleteRows($refs.searchtable.selectedRowKeys)">删除</a-button>
            </permission>-->
        </template>
      </search-table>
    </div>

  </div>
</template>
<script>

import {mapGetters} from 'vuex'
export default {
  name: 'shop-balance',
  components: {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      dealRecordVisible: false,// 交易记录弹窗
      unavailableBalanceVisible: false,// 不可用余额弹窗
      currentTab: 0,
      shopInfo: {},
      defaultParams: {
        status: ''
      },
      recordUrl: '/shop/bill/page',
      buyType: [
        {
          label: "收入",
          value: "0",
        },
        {
          label: "退款",
          value: "1",
        }
      ],
      columns: [
        {
          title: '时间',
          dataIndex: 'createDate'
        },
        {
          title: '名称',
          dataIndex: 'fareName'
        },
        {
          title: '订单编号',
          dataIndex: 'id'
        },
        {
          title: '支付单号',
          dataIndex: 'shopId'
        },
        {
          title: '对方',
          dataIndex: 'createBy'
        },
        {
          title: '金额(元) | 明细',
          dataIndex: 'size'
        },
        {
          title: '状态',
          dataIndex: 'deleted'
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ]
    }
  },
  mounted () {
    this.getShopInfo()
  },
  methods: {
    getShopInfo () {
      this.$get('/shop/queryById', {id: this.userInfo.shopId}).then(res => {
        if (res && res.returnCode === 1000) {
          this.shopInfo = res.dataInfo
        }
      })
    },
    jumpDetail(id){
      console.log("详情页面")
      this.$router.push({
        path: "/money/account/shopBalance2/detail",
        query:{
          id
        }
      });
    },
    exportExcel(){
      /* const params = this.$refs.searchtable.searchParams || {}
       const selectedIds = this.$refs.searchtable.selectedRowKeys
       console.log(selectedIds )
       if (selectedIds && selectedIds.length) {
         params['id'] = selectedIds.join(',')
       }
       console.log(params)
       this.$export('/order/goodsrepairs/export',params)*/
      // this.$export('/order/goodsrepairs/export', params)
    },
  /*  closeModal (flag) {
      this.dealRecordVisible = false
      this.unavailableBalanceVisible = false
    },
    openModal (modal) {
      this[modal] = true
    },*/
    tabChange (key) {
      this.defaultParams.status = key == 0 ? '' : key
      this.$refs.searchtable.refreshTable()
    }
  }
}
</script>
<style lang="less" scoped>
.shop-balance {
  .shop-balance-info {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
  }
  .shop-balance-record-title {
    margin-bottom: 20px;
    height: 40px;
    padding: 0 20px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .balance {
    font-size: 22px;
  }
  .icon-gray {
    
    color: #999;
    font-size: 14px;
  }
}
</style>